<template>
    <div class="app">
        <div class="nav"><ManageNavict /></div>
        <div class="bot">
            <div style="font-size: 25px;line-height: 25px;margin-top: 40px;margin-bottom: 40px;">
                救助管理
            </div>
            <div>
                <el-table :data="myStore.pet_in"  border
                    :height="myStore.pet_in.length>14?600:auto"
                    style="width: 98%;--el-table-border-color: none;border-right: #03a850 solid;border-left: 1px #03a850 solid;border-bottom: 1px #03a850 solid;"
                    :highlight-current-row="false"
                    :header-cell-style="{ backgroundColor: '#03ab50', color: 'black', fontSize: '14px', textAlign: 'center', borderLeft: '0.5px black solid', borderBottom: '1px black solid' }"
                    :cell-style="{ color: 'black', fontSize: '14px', textAlign: 'center', borderBottom: '0.5px #03a850 solid', borderLeft: '0.5px #03a850 solid' }"
                    :row-style="{ color: 'black', fontSize: '14px', textAlign: 'center', }"
                >
                    <el-table-column prop="order_id" label="订单id"  />
                    <el-table-column prop="name" label="宠物名"  />
                    <el-table-column prop="type" label="品种"  />
                    <el-table-column prop="gender" label="宠物性别"  />
                    <el-table-column prop="desc" label="宠物类型"  />
                    <el-table-column label="头像">
                      <template v-slot="{ row }">
                        <!-- 使用 el-image 显示图片 -->
                        <el-image :src="row.img" style="width: 50px; height: 50px"></el-image>
                      </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="Operations" >
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handleClick(scope.row)"
                        >同意</el-button
                        >
                        <el-button link type="primary" size="small" @click="refuse(scope.row)">拒绝</el-button>
                    </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>

<script setup>
import ManageNavict from './ManageNavict.vue'
import { onMounted } from 'vue'
import { useStore } from '@/stores/counter'
import axios from 'axios';
import { ElMessage, rowContextKey } from 'element-plus';

const myStore = useStore()

function base64ToBlobUrl(base64String, mimeType = "application/octet-stream") {
  // 将 Base64 字符串解码为二进制数据
  const binaryData = Uint8Array.from(atob(base64String), c => c.charCodeAt(0));

  // 创建 Blob 对象
  const blob = new Blob([binaryData], { type: mimeType });

  // 通过 URL.createObjectURL 创建 Blob 的 URL
  const blobUrl = URL.createObjectURL(blob);

  return blobUrl;
}

function convertBase64ToBlobUrls(arrayOfObjects) {
  return arrayOfObjects.map(obj => {
    // 检查对象是否包含 img 字段
    if (obj && obj.img) {
      // 将 Base64 字符串转换为 Blob URL
      const blobUrl = base64ToBlobUrl(obj.img);
      
      // 返回新对象，img 字段替换为 Blob URL
      return { ...obj, img: blobUrl };
    } else {
      // 对于没有 img 字段的对象，保持不变
      return obj;
    }
  });
}



// 定义触发操作的方法，在组件挂载后执行
const fetchData = async (url) => {
  try {
    // 发起请求
    const response = await axios.get(url)

    // 更新数据到 Pinia Store
    myStore.set_Petin(convertBase64ToBlobUrls(response.data.history_list))
    console.log(myStore.pet_in)
  } catch (error) {
    console.error('Error fetching data:', error)
  }
}

// 在组件挂载后执行 fetchData 方法
onMounted(() => {
  fetchData('http://localhost:8000/manage/pet_in')
})


const handleClick = (row) => {
  const storedData = sessionStorage.getItem('manage_token');
  const t = JSON.parse(storedData)
  if(t !== null){
    axios.post("http://localhost:8000/manage/pet_in_a",{
      order_id:row.order_id
    },{
      headers:{
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' 
      }
    }).then((res) => {
      if(res.data.code === '200'){
        fetchData('http://localhost:8000/manage/pet_in')
        ElMessage({
          message:res.data.infos,
          type:"success"
        })
      }else{
        ElMessage({
          message:res.data.infos,
          type:"error"
        })
      }
    })
  }else{
    ElMessage({
      message:"你看起来还没登录，请登录！",
      type:"error"
    })
  }

}

const refuse = (row) =>{
  const storedData = sessionStorage.getItem('manage_token');
  const t = JSON.parse(storedData)
  if(t !== null){
    axios.post("http://localhost:8000/manage/pet_in_refuse",{
      order_id:row.order_id
    },{
      headers:{
        'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' 
      }
    }).then((res) => {
      if(res.data.code === '200'){
        fetchData('http://localhost:8000/manage/pet_in')
        ElMessage({
          message:res.data.infos,
          type:"success"
        })
      }else{
        ElMessage({
          message:res.data.infos,
          type:"error"
        })
      }
    })
  }else{
    ElMessage({
      message:"你看起来还没登录，请登录！",
      type:"error"
    })
  }

}



</script>

<style scoped>
    .app{
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left:0;
      color: black;
      display: flex;
      justify-content: start;
    }
    .nav{
        height: 200px;
    }
    .bot{
        width: 84%;
        height: auto;
        margin:0 auto;

    }
    ::v-deep .el-radio-button :hover{
        color: #03a850;
        
    }
    ::v-deep .el-radio-button {
        /* width: 120px; */
        border: #03a850 1px solid;
        border-radius: 2px;
        margin-left: 20px;
        background-color: #edf3d1;
    }
</style>